<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>

  <!-- HTML 结构 -->
  <div class="banner" id="banner">
    <ul class="imgBox">
      <li class="active" style="background-color: skyblue;">1</li>
      <li style="background-color: orange;">2</li>
      <li style="background-color: purple;">3</li>
      <li style="background-color: green;">4</li>
      <li style="background-color: cyan;">5</li>
    </ul>

    <ol class="pointBox"></ol>

    <div class="prev">&lt;</div>
    <div class="next">&gt;</div>
  </div>

  <div class="banner" id="banner2">
    <ul class="imgBox">
      <li class="active" style="background-color: skyblue;">1</li>
      <li style="background-color: orange;">2</li>
      <li style="background-color: purple;">3</li>
      <li style="background-color: green;">4</li>
      <li style="background-color: cyan;">5</li>
      <li style="background-color: cyan;">6</li>
    </ul>

    <ol class="pointBox"></ol>

    <div class="prev">&lt;</div>
    <div class="next">&gt;</div>
  </div>


  <div class="banner" id="banner3">
    <ul class="imgBox">
      <li class="active" style="background-color: skyblue;">1</li>
      <li style="background-color: orange;">2</li>
      <li style="background-color: purple;">3</li>
      <li style="background-color: green;">4</li>
      <li style="background-color: cyan;">5</li>
      <li style="background-color: cyan;">6</li>
      <li style="background-color: red;">7</li>
    </ul>

    <ol class="pointBox"></ol>

    <div class="prev">&lt;</div>
    <div class="next">&gt;</div>
  </div>

  <div class="banner" id="banner4">
    <ul class="imgBox">
      <li class="active" style="background-color: skyblue;">1</li>
      <li style="background-color: orange;">2</li>
      <li style="background-color: purple;">3</li>
      <li style="background-color: green;">4</li>
      <li style="background-color: cyan;">5</li>
      <li style="background-color: cyan;">6</li>
      <li style="background-color: red;">7</li>
    </ul>

    <ol class="pointBox"></ol>

    <div class="prev">&lt;</div>
    <div class="next">&gt;</div>
  </div>

  <script src="./index.js"></script>
  <script>
       // 轮播切换速度 duration
       // 动画 speed
       const banner = new Banner('#banner',{duration:2000,speed:100});
       const banner2 = new Banner('#banner2');
       const banner3= new Banner('#banner3',{duration:2000,speed:500});
       const banner4= new Banner('#banner4',{duration:3000,speed:500});

  </script>

</body>

</html>
